import { Outlet } from "react-router-dom";
import { Layout, Flex } from 'antd';

const { Header, Footer, Sider, Content } = Layout;
const headerStyle: React.CSSProperties = {
    textAlign: 'center',
    color: '#fff',
    height: 64,
    paddingInline: 48,
    lineHeight: '64px',
    backgroundColor: '#4096ff',
  };
  
  const contentStyle: React.CSSProperties = {
    textAlign: 'center',
    minHeight: 120,
    lineHeight: '120px',
    color: '#fff',
    backgroundColor: '#0958d9',
  };
  
  const footerStyle: React.CSSProperties = {
    textAlign: 'center',
    color: '#fff',
    backgroundColor: '#4096ff',
  };
  
  const layoutStyle = {
    overflow: 'hidden',
    width: '100vw',
    minHeight: '100vh',
  };
export default function Home(){
    return (
        <Flex>
            <Layout style={layoutStyle}>
            <Header style={headerStyle}>Header</Header>
            <Content style={contentStyle}>
                <Outlet/>
            </Content>
            <Footer style={footerStyle}>Footer</Footer>
            </Layout>
        </Flex>  
    )
}